<template>
  <ul class="todo-list">
    <li
      v-for="(todoItem, index) in todoArr"
      :key="index"
      class="todo"
      :class="{
        completed: todoItem.isCompleted,
        editing: todoItem == editedTodo,
      }"
    >
      <div class="view">
        <input
          class="toggle"
          type="checkbox"
          @click="isCompletedClk(todoItem, index)"
        />
        <label @dblclick="dbClk(todoItem)">{{ todoItem.title }}</label>
        <button class="destroy" @click="delTodoItem(index)"></button>
      </div>
      <input
        class="edit"
        type="text"
        v-model="todoItem.title"
        @keydown.enter="iptliEnter(todoItem, index)"
      />
    </li>
  </ul>
</template>

<script>
export default {
  props: ["todoArr"],
  data() {
    return {
      editedTodo: null,
    };
  },
  methods: {
    dbClk(val) {
      this.editedTodo = val;
    },
    iptliEnter(val, index) {
      this.$parent.editedTodoFn(val, index);
      this.editedTodo = null;
    },
    delTodoItem(index) {
      this.$parent.delTodoItemFn(index);
    },
    isCompletedClk(val, index) {
      val.isCompleted = !val.isCompleted;
      this.$parent.isCompletedClkFn(val, index);
    },
  },
};
</script>

<style scoped  src="../todo.css">
</style>